<html>
<head>
<title>Demo Application</title>
<link rel="stylesheet" type="text/css" href="css/custom-theme/jquery-ui-1.8.17.custom.css"/>
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css"/>
<link rel="stylesheet" type="text/css" media="screen" href="css/demo.css"/>

<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.tmpl.js"></script>
<script src="js/jquery-ui-1.8.17.custom.min.js"></script>
<script src="js/grid/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/grid/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script src="js/json2.js" type="text/javascript"></script>

<script id="userTemplate" type="text/html">
	<tr class="user-list-header">
		<td>${userName}</td>
		<td>${firstName}</td>
		<td>${lastName}</td>
		<td>${phone}</td>
		<td>${email}</td>
		<td>${age}</td>
		<td>${city}</td>
		<td>${createdOn}</td>
		<td>${updatedOn}</td>
		<td class="actions"><input type="button" id="editbutton" value="Edit"/>
			<input type="button" id="deletebutton" value="Delete"/></td>
	</tr>
</script>
<script id="userTemplateHeader" type="text/html">
	<tr class="ui-widget-header">
		<td>User Name</td>
		<td>First Name</td>
		<td>Last Name</td>
		<td>Phone No</td>
		<td>Email</td>
		<td>Age</td>
		<td>City</td>
		<td>Created On</td>
		<td>Updated On</td>
		<td>Actions</td>
	</tr>
</script>
<script type="text/javascript" src="js/demo.js"></script>

</head>
<body>
<div id="container">
	<div class="main headerClass">
		<span class="headerText">Demo Application based on JQuery</span>
	</div>
	<div class="main contentpane">
		<div id="usersList" class="container">
			<table width="100%">
				<tr>
					<td>
						<input type="button" id="adddisplay" value="Add User"/>
					</td>
				</tr>
				<tr>
					<td>
						<table id="message" width="100%">
						</table>
					</td>
				</tr>
			</table>

			<table id="list2">
			</table>
		</div>
		<div id="addformdiv" style="display:none;" class="container">
			<form id="addform">
				<fieldset>
					<legend>Add User</legend>
				<span class="formlabel">
				<label class="inputlabel">User Name:</label>
				 <input type="text" name="userName" class="required"/>
					</span>
				<span class="formlabel">
			<label class="inputlabel">First Name:</label>
				<input type="text" name="firstName" class="required"/>
				</span>
				<span class="formlabel">
			<label class="inputlabel">Last Name:</label>
				<input type="text" name="lastName" class="required"/>
					</span>
				<span class="formlabel">
            <label class="inputlabel">Phone:</label>
             <input type="text" name="phone"/>
					</span>
				<span class="formlabel">
            <label class="inputlabel">Email:</label>
                <input type="text" name="email" class="required email"/>
					</span>
				<span class="formlabel">
            <label class="inputlabel">City:</label>
                <input type="text" name="city"/>
					</span>
				<span class="formlabel">
            <label class="inputlabel">Age:</label>
                <input type="text" name="age" class="number"/>
					</span>
					<div style="margin-top:8px;">
						<input type="button" id="adduser" value="Add"/>
						<input type="button" name="cancel" id="canceladd" value="Cancel"/>
					</div>
				</fieldset>
			</form>
		</div>
		<div id="userformdiv" class="container" style="display:none">
			<form id="editform">
				<fieldset>
					<legend>Update User</legend>
				<span class="formlabel">
				<label class="inputlabel">User Name:</label>
				 <input type="text" name="userName" class="required" readonly/>
					</span>
				<span class="formlabel">
			<label class="inputlabel">First Name:</label>
				<input type="text" name="firstName" class="required"/>
				</span>
				<span class="formlabel">
			<label class="inputlabel">Last Name:</label>
				<input type="text" name="lastName" class="required"/>
					</span>
				<span class="formlabel">
            <label class="inputlabel">Phone:</label>
             <input type="text" name="phone"/>
					</span>
				<span class="formlabel">
            <label class="inputlabel">Email:</label>
                <input type="text" name="email" class="required email"/>
					</span>
				<span class="formlabel">
            <label class="inputlabel">City:</label>
                <input type="text" name="city"/>
					</span>
				<span class="formlabel">
            <label class="inputlabel">Age:</label>
                <input type="text" name="age" class="number"/>
					</span>

					<div style="margin-top:8px;">
						<input type="button" name="update" value="Update">
						<input type="button" name="cancel" value="Cancel">
					</div>
				</fieldset>
			</form>
		</div>
	</div>
	<div class="main footerClass">
		<span class="footerText">Copyright No rights reserved</span>
	</div>
</div>
</body>

</html>